<template>
  <a-modal :open="props.open" title="模型评估" width="800px" @ok="ok" @cancel="cancel">
    <a-form
      ref="taskFormRef"
      :model="formState"
      :layout="'vertical'"
      :rules="taskRules"
      :label-col="{ style: { width: '120px' } }"
      label-align="left"
    >
      <!-- class="w-560" -->
      <a-form-item label="任务名称" name="name">
        <div class="w-704">
          <a-input v-model:value="formState.name" v-trim placeholder="请输入任务名称" :maxlength="200" />
        </div>
      </a-form-item>
      <a-form-item label="评估指标" name="normDetailsIdList">
        <div class="w-704">
          <a-select
            v-model:value="formState.normDetailsIdList"
            class="w-440"
            :show-search="false"
            :options="targetOptions"
            :field-names="{ label: 'labelName', value: 'labelId' }"
            mode="multiple"
            max-tag-count="responsive"
            placeholder="请选择类型"
            style="width: 100%"
            show-arrow
          />
        </div>
      </a-form-item>
      <a-form-item label="数据集" name="dataIdList">
        <div class="w-866">
          <g-select-tree-data
            ref="selectDataBucketRef"
            v-model:checkedIds="formState.dataIdList"
            type-name="数据集"
            :has-modal="false"
            :get-tree-data-api="selectTreeDataApi.dataBucketTree"
            :get-collect-tree-data-api="selectTreeDataApi.collectDataBucketTree"
            :get-list-data-api="selectTreeDataApi.searchBucketList"
            :get-collect-list-data-api="selectTreeDataApi.collectSearchBucketList"
            :field-names="{ children: 'children', title: 'name', key: 'id' }"
          >
            <template #selected-tools>
              <a-tooltip title="仅从已选数据集中抽取满足“数据处理规则”格式条件的文件">
                <i class="iconfont icon-information-fill text-color-4 ml-8 h-22"></i>
              </a-tooltip>
            </template>
          </g-select-tree-data>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { modelEvaluationApi, selectTreeDataApi } from '@/services/api'
  import { validateBitLen, validateDirName } from '@/utils'

  interface FromState {
    name: string
    modelInfoId: string
    modelType: string
    normDetailsIdList: string | number[]
    dataIdList: string[]
  }
  const props = defineProps({
    open: {
      type: Boolean,
      default: false
    },
    modelId: {
      type: String,
      default: ''
    }
  })

  const emits = defineEmits<{ (e: 'handleOk'): void; (e: 'handleCancel'): void }>()

  let validateDataBucket = async (rule: Rule, value: string) => {
    if (value.length === 0) {
      return Promise.reject('请选择数据集')
    }
    return Promise.resolve()
  }
  const taskRules: Record<string, Rule[]> = {
    name: [
      { required: true, trigger: 'change', message: '请输入任务名称' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    normDetailsIdList: [{ required: true, message: '请选择算法服务', trigger: 'change' }],
    dataIdList: [{ required: true, trigger: 'change', validator: validateDataBucket }]
  }
  const formState = ref<FromState>({
    name: '',
    modelInfoId: props.modelId,
    modelType: '1',
    normDetailsIdList: [],
    dataIdList: []
  })

  const targetOptions = ref<Record<string, number | string>[]>([
    {
      labelName: 'MSE-MAE',
      labelId: 0
    },
    {
      labelName: 'Top-K Accuracy',
      labelId: 1
    },
    {
      labelName: 'TPR@FPR',
      labelId: 2
    },
    {
      labelName: 'mAP',
      labelId: 3
    },
    {
      labelName: 'Precision-Recall-Hmean',
      labelId: 4
    }
  ])
  const cancel = () => {
    emits('handleCancel')
  }
  const taskFormRef = ref()
  const { loading, runAsync: runAddDataCleaning } = useRequest(modelEvaluationApi.add)

  const ok = () => {
    taskFormRef.value
      .validate()
      .then(async () => {
        const params = {
          ...formState.value
        }
        try {
          await runAddDataCleaning(params, { isAddUid: true })

          message.success('操作成功')
          emits('handleOk')
        } catch (error) {
          if (error.code === 'ATP-100021') {
            emits('handleOk')
          }
        }
      })
      .catch((err: any) => {
        console.log(err)
      })
  }
</script>

<style lang="less" scoped>
  .upload-btn {
    width: 52px;
    color: @link;
    cursor: pointer;

    img {
      padding-bottom: 4px;
      vertical-align: middle;
      width: 14px;
      height: 14px;
    }
  }
</style>
